<template>
  <div class="clearfix">
    <!-- 定义抽屉组件 -->
    <a-drawer
      title="自查记录列表"
      placement="right"
      :closable="true"
      :visible="drawerVisible"
      :width="1000"
      @close="closeDrawer"
    >
      <!-- 抽屉内容放在这里 -->
      <a-table :dataSource="dataList" 
      :columns="columns1"
      :pagination="{ pageSize: 20, pageSizeOptions: [10, 20, 30, 40] }"  
       />
      <!-- 二级抽屉 -->
      <a-drawer
        title="自查详情"
        placement="right"
        :closable="true"
        :visible="childrenDrawerVisible"
        :width="1000"
        @close="closeChildrenDrawer"
      >
        <!-- 二级抽屉内容放在这里 -->
        <VillageDetailzc
          v-model:vvvvisible="vvvisible"
          title="自查抽屉"
          :vvvvisible="vvvisible"
          :width="1000"
          :detailTableHeight="detailTableHeight"
          :vclosable="true"
          :vdestroyOnClose="true"
          :data="vvvvdetailData"
          :vvvvvdetailParams="vvvvdetailParams"
          :vvvvcurrentTitle="vvvv_currentTitle"
          @close="handleVillageDetailClose"
        >
        </VillageDetailzc>
      </a-drawer>
    </a-drawer>


    <a-drawer
    title="检查记录列表"
    placement="right"
    :closable="true"
    :visible="drawerVisiblejc"
    :width="1000"
    @close="closeDrawerjc"
  >
    <!-- 抽屉内容放在这里 -->
    <a-table :dataSource="dataListjc" 
    :columns="columnsjc"
    :pagination="{ pageSize: 20, pageSizeOptions: [10, 20, 30, 40] }"  
     />
    <!-- 二级抽屉 -->
    <a-drawer
      title="检查详情"
      placement="right"
      :closable="true"
      :visible="childrenDrawerVisiblejc"
      :width="1000"
      @close="closeChildrenDrawerjc"
    >
      <!-- 二级抽屉内容放在这里 -->
      <VillageDetailjc
        v-model:vvvvisible="vvvisible"
        title="自查抽屉111"
        :vvvvisible="vvvisible"
        :width="1000"
        :detailTableHeight="detailTableHeight"
        :vclosable="true"
        :vdestroyOnClose="true"
        :data="vvvvdetailData"
        :vvvvvdetailParams="vvvvdetailParams"
        :vvvvcurrentTitle="vvvv_currentTitle"
        @close="handleVillageDetailClose"
      >
      </VillageDetailjc>
    </a-drawer>
  </a-drawer>

    <Button type="primary" shape="round" size="small" v-if="visibleButtons" @click="onButtonClick">
      {{ btnTitle }}
    </Button>

    <Description
      :title="popTitle"
      :collapseOptions="{ canExpand: false, helpMessage: popHelp }"
      :column="1"
      bordered
      :data="tableData"
      :schema="tableSchema"
      size="small"
    >
      <template #title>
        <h1 class="custom-pop-title">{{ popTitle }}</h1>
      </template>

      <template #extra>
        <!-- 这里不生效的原因是因为封装了一层,不是原生 -->
        <Button type="primary">Edit</Button>
      </template>
    </Description>

    <div class="my-div">
      <Space :size="4">
        <!-- <Button type="primary" size="small" v-if="visibleStatus" @click="onButtonClickD"
          >打开</Button
        > -->
        <!-- <Button type="primary" size="small" v-if="visibleStatus" @click="showDrawer"
          >自查记录
          </Button>
        <Button type="primary" size="small" v-if="visibleStatus" @click="showDrawerjc"
          >检查记录</Button> -->

        <Button type="text"   @click="showDrawer">
          <Tag :color="getFireZcColor()">{{ getFireZcText() }}</Tag>
        </Button>
        <Button type="text"  @click="showDrawerjc">
          
          <Tag :color="getJcColor()">{{ getJcText() }}</Tag>
        </Button>
      </Space>
    </div>
  </div>
</template>

<script>
  import axios from 'axios';
  import { Description } from '/@/components/Description/index';
  import {
    Tabs,
    Space,
    Divider,
    Drawer,
    Tag,
    Collapse,
    Button,
    Popover,
    Row,
    Col,
  } from 'ant-design-vue';
  import { inject, getCurrentInstance } from 'vue';
  import { getCheckHousrInfoApi2 } from '/@/api/demo/system';
  import { defHttp } from '/@/utils/http/axios';
  import { Table } from 'ant-design-vue';
  // import CheckDetail from '/@/views/village/threePure/cjworkstatic/component/checkDetailDrawer.vue';
  // import VillageDetail from '/@/views/village/threePure/cjworkstatic/component/detail.vue';
  // import VillageDetailzc from '/@/views/village/threePure/cjworkstatic/component/detail_mapzc.vue';
  // import VillageDetailjc from '/@/views/balconyManager/wprogressdetail/component/detail_mapjc.vue';

  import { ref, computed, onMounted, watch } from 'vue';

  export default {
    name: 'MaplibPopup',
    components: {
      // VillageDetailzc,
      // VillageDetailjc,
      Description,
      Tabs,
      'a-table': Table,
      Space,
      Divider,
      Drawer,
      Tag,
      Collapse,
      Button,
      'a-drawer': Drawer,
      Popover,
      Row,
      Col,
    },
    props: {
      obj: {
        type: Object,
      },
      tableSchema: {
        type: Array,
      },
      btnTitle: {
        default: '查看场所',
        type: String,
      },
      popTitle: {
        default: '房屋基本信息',
        type: String,
      },
      // popHelp: {
      //   default: '房屋基本信息',
      //   type: String,
      // },
      visibleButtons: {
        default: false,
        type: Boolean,
      },
      visibleStatus: {
        default: false,
        type: Boolean,
      },
    },
    data() {
      return {
        vvvisible: true,
        detailTableHeight: 600,
        vvvdetailData: [],
        vvvvdetailData: [],
        vvvdetailParams: {},
        vvvvdetailParams: {},
        vvvv_currentTitle: {
          id:"",
          title:""
        },
        vvvcurrentTitle: {},
        drawerVisible: false, // 控制一级抽屉的显示与隐藏
        childrenDrawerVisible: false, // 控制二级抽屉的显示与隐藏
        drawerVisiblejc: false, // 控制一级抽屉的显示与隐藏
        childrenDrawerVisiblejc: false, // 控制二级抽屉的显示与隐藏
        dataList: [],
        dataListjc: [],
        columns1: [
          {
            title: '序号',
            width: 50,
            dataIndex: 'index',
            key: 'index',
            align: 'center',
            fixed: 'left',
          },
          {
            title: '自查时间',
            dataIndex: 'pcsj',
            key: 'pcsj',
            align: 'center',
            width: 100,
          },
          {
            title: '有无隐患',
            dataIndex: 'yhnum',
            key: 'yhnum',
            align: 'center',
            width: 100,
          },
          {
            title: '是否整改',
            dataIndex: 'zgnum',
            key: 'zgnum',
            align: 'center',
            width: 100,
          },
          {
            title: '自查详情',
            dataIndex: 'cz',
            key: 'cz',
            align: 'center',
            width: 100,
            customCell: (row, index, column) => {
              let isNoHzyh = row.town !== '汇总' ? true : false;
              let style = 'cursor:pointer;text-decoration: underline; color: blue;';
              let isNoZero = row[column.key] !== 0 ? true : false;
              return {
                style: `${isNoHzyh === true && isNoZero ? style : ''}`,
                class: 'cell-hover',
                onClick: async () => {
                  console.log('点击事件row.town', row.town);
                  this.getDetailData(row, index, column, isNoHzyh, isNoZero);
                },
              };
            },
          },
        ],
        columnsjc: [
          {
            title: '序号',
            width: 50,
            dataIndex: 'index',
            key: 'index',
            align: 'center',
            fixed: 'left',
          },
          {
            title: '检查时间',
            dataIndex: 'pcsj',
            key: 'pcsj',
            align: 'center',
            width: 100,
          },
          {
            title: '有无隐患',
            dataIndex: 'yhnum',
            key: 'yhnum',
            align: 'center',
            width: 100,
          },
          {
            title: '是否整改',
            dataIndex: 'zgnum',
            key: 'zgnum',
            align: 'center',
            width: 100,
          },
          {
            title: '检查详情',
            dataIndex: 'cz',
            key: 'cz',
            align: 'center',
            width: 100,
            customCell: (row, index, column) => {
              let isNoHzyh = row.town !== '汇总' ? true : false;
              let style = 'cursor:pointer;text-decoration: underline; color: blue;';
              let isNoZero = row[column.key] !== 0 ? true : false;
              return {
                style: `${isNoHzyh === true && isNoZero ? style : ''}`,
                class: 'cell-hover',
                onClick: async () => {
                  console.log('点击事件row.town', row.town);
                  this.getDetailDatajc(row, index, column, isNoHzyh, isNoZero);
                },
              };
            },
          },
        ],
      };
    },
    computed: {
      tableData() {
        return this.obj || {};
      },
    },
    created() {
      this.fetchData();
      this.fetchDatajc();
    },
    methods: {
      //自查
      async fetchData() {
        let res = await defHttp.get({
          //检查
          url: `/houses/baseInfo/baseInfoDetaile`,
          params: {
            pageIndex: 0,
            pageSize:99,
            limit: 9999,
            fwbh: this.obj.fwbh,
            orderBy: 0,
          },
          headers: {
            // @ts-ignore
            ignoreCancelToken: true,
          },
        });
        // console.log('created2', res);
        this.dataList = res.items;
      },

      //检查
      async fetchDatajc() {
        let res = await defHttp.get({
          url: `/village/baseInfo/baseInfoDetaile`,
          params: {
            pageIndex: 0,
            limit: 9999,
            fwbh: this.obj.fwbh,
            orderBy: 0,
          },
          headers: {
            // @ts-ignore
            ignoreCancelToken: true,
          },
        });
        this.dataListjc = res.items;
      },

      async getDetailData(row, index, column, isNoHzyh, isNoZero) {
        console.log('isNoHzyh', isNoHzyh);
        if (isNoHzyh && isNoZero) {
          let params = {
          };
          console.log('aaaaaaaa', params);
          this.vvvvdetailParams = params;
          let current = {
            title: row.fwbh + '【' + row.pcsj + '】',
            xzq: row.xzq,
            id: row.base_id,
          };
          this.vvvv_currentTitle.title = current.title;
          this.vvvv_currentTitle.xzq = current.xzq;
          this.vvvv_currentTitle.id = current.id;

          console.log('*******自查参数*************3333', current);
          console.log('---------1', this.vvvvdetailData);
          console.log('---------2', this.vvvvdetailParams);
          console.log('---------3', this.vvvv_currentTitle);
          this.showDrawer2(); // 调用正确的函数名
        }
      },

      async getDetailDatajc(row, index, column, isNoHzyh, isNoZero) {
        console.log('isNoHzyh', isNoHzyh);
        if (isNoHzyh && isNoZero) {
          let params = {
          };
          // console.log('检查', params);
          this.vvvvdetailParams = params;
          let current = {
            title: row.fwbh + '【' + row.pcsj + '】',
            xzq: row.xzq,
            id: row.base_id,
          };
          this.vvvv_currentTitle.title = current.title;
          this.vvvv_currentTitle.xzq = current.xzq;
          this.vvvv_currentTitle.id = current.id;

          console.log('*******检查参数*************3333', current);
          console.log('---------1', this.vvvvdetailData);
          console.log('---------2', this.vvvvdetailParams);
          console.log('---------3', this.vvvv_currentTitle);
          this.showDrawer2jc(); // 调用正确的函数名
        }
      },
      // 关闭二级抽屉的方法
      closeChildrenDrawer() {
         console.log('关闭二级抽屉的方法');
        this.childrenDrawerVisible = false;
      },

      closeChildrenDrawerjc() {
        console.log('关闭二级抽屉的方法jc');
        this.childrenDrawerVisiblejc = false;
      },

      handleVillageClose() {
        this.vvvisible = false;
      },
      handleVillageDetailClose() {
        this.vvvisible = false;
      },
      onButtonClickD() {
        this.vvvisible = true;
      },
      showDrawer() {
        this.drawerVisible = true; // 打开一级抽屉
      },
      showDrawer2() {
        this.childrenDrawerVisible = true; // 打开二级抽屉
      },
      closeDrawer() {
        this.drawerVisible = false;
      },

      showDrawerjc() {
        this.drawerVisiblejc = true; // 打开一级抽屉
      },
      showDrawer2jc() {
        this.childrenDrawerVisiblejc = true; // 打开二级抽屉
      },
      closeDrawerjc() {
        this.drawerVisiblejc = false;
      },
      onButtonClick() {
        this.$emit('clickbutton', this.obj);
      },
      onButtonClickFire() {
        this.$emit('clickbuttonfire', this.obj);
      },
      onButtonClickPolice() {
        this.$emit('clickbuttonpolice', this.obj);
      },
      onButtonClickZhujian() {
        this.$emit('clickbuttonzhujian', this.obj);
      },
      getFireZcColorAndText() {
        if (this.tableData && this.tableData['pczt2']) {
          return this.tableData['zcyhcount'] === '0'
            ? { color: 'red', text: '自查有隐患' }
            : { color: 'green', text: '自查无隐患' };
        }
        return { color: 'yellow', text: '状态未知' };
      },
      getJcColorAndText() {
        if (this.tableData && this.tableData['pczt2']) {
          return this.tableData['jcyhcount'] === '0'
            ? { color: 'red', text: '检查有隐患' }
            : { color: 'green', text: '检查无隐患' };
        }
        return { color: 'yellow', text: '状态未知' };
      },
      getFireZcColor() {
        return this.getFireZcColorAndText().color;
      },
      getFireZcText() {
        return this.getFireZcColorAndText().text;
      },
      getJcColor() {
        return this.getJcColorAndText().color;
      },
      getJcText() {
        return this.getJcColorAndText().text;
      },
    },
  };
</script>

<style scoped>
  .ant-tag {
    margin-right: 0px;
  }
  .my-div {
    text-align: center;
    padding: 1px;
    margin: 1px;
    font-size: 18px;
    line-height: 1.5;
  }
  .custom-pop-title {
    font-size: 24px;
  }
  .tp-box {
    height: 100%;
  }
  .title-detail {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .pagination {
    margin-top: 5px;
    display: flex;
    justify-content: flex-end;
  }
</style>
